<!--
 * @Author: zhang_gen_yuan
 * @Date: 2020-12-17 13:39:35
 * @LastEditTime: 2020-12-21 09:50:34
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/observer.js"></script>
    <script src="./js/compile.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ name }}</h1>
        <div>
            <div v-text="hobby.two"></div>
        </div>
        <h1>{{ age }}</h1>
        <div>
            {{ hobby.one }}
        </div>
        <div>
            <button id="btn">{{ btn }}</button>
        </div>
    </div>
    <script>
        let data = {
            name: '李四',
            age: 18,
            hobby: {
                one: 'pingpang',
                two: "姑娘",
                three: {
                    msg: "就这么多吧"
                }
            },
            btn:'按钮',
            arr:[1,2,3]
        }
        let vm = new MyVue({
            el: '#app',
            data: data
        })

        document.getElementById('btn').addEventListener('click',clickHandle.bind(vm),false);
        function clickHandle(){
            this.age += 1;
        }
    </script>
</body>

</html>